<template>
  <div class="user-manage">
   <!-- 查询用户 -->
     <div class="query-form">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户ID">
              <el-input v-model="formInline.userId" placeholder="用户ID" clearable />
            </el-form-item>
            <el-form-item label="用户名称">
              <el-input v-model="formInline.userId" placeholder="用户名" clearable />
            </el-form-item>
            <el-form-item label="用户状态" placeholder="用户名"  clearable>
              <el-select
                v-model="formInline.state"
                placeholder="用户状态"
                clearable
              >
                <el-option label="所有" :value="0" />
                <el-option label="在职" :value="1" />
                <el-option label="离职" :value="2" />
                <el-option label="试用期" :value="3" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="Activity time">
              <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="Pick a date"
                clearable
              />
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="onChaxun">查询</el-button>
            </el-form-item>
          </el-form>
     </div>
     <!-- 用户信息列表 -->
     <div class="base-table" >
         <div class="action">
           <el-button size="small" type="primary" @click="userFormVisible = true" >新增</el-button>
           <el-button size="small" type="danger">批量删除</el-button>
         </div>

         <el-table :data="tableData" style="width: 100%;height: calc(100vh - 215px);" row-key="caidanId" >
         <el-table-column v-for="item in columns" 
             :key="item.label" 
             :label="item.label" 
             :prop="item.prop" 
             :formatter="item.formatter"
         />
         <el-table-column align="right" label="操作" width="200">
           <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">新增</el-button>
             <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
             <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
      </div>

      <!-- 新增菜单弹窗 -->
      <el-dialog v-model="userFormVisible" title="新增用户" width="700" center>
        <el-form  :model="addMenuForm" class="demo-form-inline1"  >
           <el-form-item label="父级菜单" prop="parentId">
              <el-cascader 
               placeholder="选择"
               v-model="addMenuForm.parentId"
               :options="tableData" 
               :props="{checkStrictly:true,value:'caidanId',label:'name'}"
               clearable 
              />
              <span class="tips">不选，则直接创建一级菜单</span>
           </el-form-item>
           <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="addMenuForm.type">
                <el-radio :value="1">菜单</el-radio>
                <el-radio :value="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="addMenuForm.name" placeholder="请输入菜单名称" />
            </el-form-item>

            <!-- <el-form-item label="菜单图标" prop="icon" v-show="menuForm.menuType == 1">
              <el-input v-model="menuForm.icon" placeholder="请输入图标地址" />
            </el-form-item> -->

            <el-form-item label="路由地址" prop="path" v-show="addMenuForm.type == 1">
              <el-input v-model="addMenuForm.path" placeholder="请输入路由地址" />
            </el-form-item>

            <el-form-item label="菜单状态" prop="menuState">
              <el-radio-group v-model="addMenuForm.state">
                <el-radio :value="1">正常</el-radio>
                <el-radio :value="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- <el-form-item label="权限标识" prop="menuCode" v-show="menuForm.menuType == 2">
              <el-input v-model="menuForm.menuCode" placeholder="请输入权限标识" />
            </el-form-item> -->
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="quxiaoUserForm">取消</el-button>
            <el-button type="primary" @click="querenUserForm">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 编辑用户弹窗 -->
      <el-dialog v-model="EdituserFormVisible" title="修改用户信息" width="400" center>
        <el-form  :model="EditUserForm" class="demo-form-inline1">
          <el-form-item label="用户名" label-width="70px" >
            <el-input v-model="EditUserForm.username" placeholder="请输入用户名" clearable />
          </el-form-item>
          <el-form-item label="用户密码">
            <el-input v-model="EditUserForm.password" placeholder="请输入用户密码" clearable />
          </el-form-item>
          <el-form-item label="用户状态">
            <el-select
              v-model="EditUserForm.state"
              placeholder="请选择用户状态"
              clearable
            >
              <el-option label="试用期" value="0" />
              <el-option label="在职" value="1" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
          </el-form-item> -->
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="quxiaoUserForm">取消</el-button>
            <el-button type="primary" @click="EditUserInfo">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>
 
 <script setup>
 import { computed, onMounted, reactive, ref, toRaw } from 'vue'
 import {getUser,addUser,deleteUser,updateUser} from "../../api/user"
 import { getCaidan,addCaidan,deleteMenu} from '../../api/caidan';

 const EdituserFormVisible = ref(false)
 const userFormVisible = ref(false)

 const tableData = ref([])
 const formInline = ref({
   userId:'',
   userName:'',
   state:''
 })

 //新增用户表单内容
 const addMenuForm = reactive({
    parentId:[null],
    type:1,
    state:1,
 })
 // 添加用户表单内容
 const EditUserForm = ref()

 const columns = reactive([
  //  {label:"菜单id",prop:"caidanId"},
   {label:"菜单名称",prop:"name"},
   {label:"菜单路由",prop:"path"},
   {
    label:"菜单类型",
    prop:"type",
    formatter(row,column,value){
        return{
          1:"菜单",
          2:"按钮",
        }[value]
      }
   },
   {
    label:"菜单状态",
    prop:"state",
    formatter(row,column,value){
        return{
          1:"正常",
          2:"禁用",
        }[value]
      }
  },
  //  {
  //    label:"用户状态",
  //    prop:"state",
  //    formatter(row,column,value){
  //      return{
  //        0:"试用期",
  //        1:"在职",
  //        2:"离职"
  //      }[value]
  //    }
  //  },
  //  {label:"注册时间",prop:"createTime"},
  //  {label:"最后登录时间",prop:"lastLoginTime"},
 ])

 // 获取当前时间
 const dangqianTime = ()=>{
   const now = new Date()
   const year = now.getFullYear()
   const month = String(now.getMonth()+1).padStart(2,"0")
   const date = String(now.getDate()).padStart(2,"0")
   const hours = String(now.getHours()).padStart(2,"0")
   const minute = String(now.getMinutes()).padStart(2,"0")
   const second = String(now.getSeconds()).padStart(2,"0")
   // console.log(year)
   // console.log(year,month,date,hours,minute,second,'当前时间')
   const nowTime = `${year}-${month}-${date} ${hours}:${minute}:${second}`
   // console.log(nowTime,'当前时间')
   return nowTime
 }

 console.log(dangqianTime(),"当前时间")




 // 查询按钮
 const onChaxun = ()=>{
   console.log("开始查询")
 }
 
 const qGetUser = ()=>{
  getCaidan().then(res=>{
       console.log(res)
       tableData.value = res.data
   })
 }
 

 
 const search = ref('')
 const filterTableData = computed(() =>
   tableData.filter(
     (data) =>
       !search.value ||
       data.name.toLowerCase().includes(search.value.toLowerCase())
   )
 )
 const handleEdit = (index, row) => {
   EdituserFormVisible.value = true
   console.log(index, row,"编辑用户按钮")
   const {...data} = row
   console.log(data)
   EditUserForm.value = data
   // console.log(EditUserForm)
 }
 const handleDelete = (index, row) => {
   console.log(index, row)
   deleteMenu(row).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
 }
// 确认修改用户信息
const EditUserInfo = ()=>{
 console.log(EditUserForm)
 const data = EditUserForm.value
 updateUser(EditUserForm.value).then(res=>{
   console.log(res)
   EdituserFormVisible.value = false
   qGetUser()

 }).catch(err=>{
   console.log(err)
 })
}

// 取消新增用户并清空表单
const quxiaoUserForm = ()=>{
 userFormVisible.value = false
}
//确认新增用户
const querenUserForm = ()=>{
 console.log(addMenuForm)
 const data = toRaw(addMenuForm)
 console.log(data)
 addCaidan(data).then(res=>{
  console.log(res)
  qGetUser()
 }).catch(err=>{
  console.log(err)
 })
//  addUserForm.value.createTime = dangqianTime()
//  const data = addUserForm.value
//  console.log(data)
//  addUser(data).then(res=>{
//    console.log(res)
//    qGetUser()
//  }).catch(err=>{
//    console.log(err)
//  })
 userFormVisible.value = false
}


 onMounted(()=>{
   qGetUser()
 })

 </script>
<style lang="scss" scoped>

.query-form{
 background: #fff;
 border-radius: 5px;
 padding: 18px 20px 0;

}
.base-table{
 margin-top: 10px;
 padding: 10px;
 border-radius: 5px;
 background: #fff;
}
  .addButton{
   margin-bottom: 10px;
  }
  .tips{
  // color: red;
  padding-left: 20px;
  font-size: 14px;
  color: #b4b4b4;
 }
  .el-table{
   // border-top: 1px solid #bcbcbc;
  }
  .demo-form-inline .el-input {
 --el-input-width: 190px;
}

.demo-form-inline .el-select {
 --el-select-width: 200px;
}
.action{
 border-radius: 5px 5px 0px 0px;
 padding: 5px 0px 10px 20px;
 border-bottom: 1px solid #ece8ee;
}

.demo-form-inline1{
 // padding-left: 40px;
 //margin-left: 50%;
 //transform: translateX(-50%);
 padding: 30px;
 
}

.demo-form-inline1 .el-input {
 --el-input-width: 220px;
}

.demo-form-inline1 .el-select {
 --el-select-width: 220px;
}
</style>



